<!--  -->
<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        offset="150"
        @load="onLoad"
      >
        <zb-timeline :records="records"></zb-timeline>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import timeline from "@comp/zb-timeline";
import { getRecord } from "@api";
import _ from "lodash";
export default {
  name: "record",
  data() {
    return {
      loading: false,
      finished: false,
      refreshing: false,
      projectId: "",
      nextpage: 0,
      records: []
    };
  },

  components: {
    [timeline.name]: timeline
  },
  mounted() {
    this.projectId = this.$route.params.id;
  },

  methods: {
    onLoad() {
      this.loading = true;
      getRecord(this.projectId, this.nextpage).then(res => {
        if (_.isArray(res.data) && !_.isEmpty(res.data)) {
          this.nextpage++;
          this.records = this.records.concat(res.data);
        } else {
          this.finished = true;
        }
        this.refreshing = false;
        this.loading = false;
      });
    },
    onRefresh() {
      // 清空列表数据
      this.nextpage = 0;
      this.records = [];
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.refreshing = true;
      this.onLoad();
    }
  }
};
</script>
<style lang="scss" scoped></style>
